<template>
    <ul>
        <li v-for="item in jokeArr" :key="item.id" :value="item.joke">{{item.joke}}</li>
    </ul>
    <button @click="GetJoke">click me</button>
</template>
<script setup lang="ts">
import {useJokeStore} from '@/stores/joke.ts';
import {storeToRefs} from 'pinia';

var jokeStore = useJokeStore(); //获取jokeStore
var {jokeArr} = storeToRefs(jokeStore);

//定义数组对象
// var jokeArr = reactive([
//     {
//         "id": "1",
//         "joke": "为什么程序员喜欢在海边工作？因为那里有很多海量数据！"
//     },
//     {
//         "id": "2",
//         "joke": "为什么程序员总是喜欢喝咖啡？因为他们需要不断地编译！"
//     },
//     {
//         "id": "3",
//         "joke": "为什么程序员不喜欢大海？因为他们害怕海量数据！"
//     }]
//     );
    
    //获取异步数据
function GetJoke(){
   jokeStore.GetAsync();
}

//数据持久化操作
jokeStore.$subscribe((mutations,state)=>{
    console.log("mutations = ", mutations);
    console.log("state = ", state);
    localStorage.setItem("jokeArr", JSON.stringify(state.jokeArr));
})

</script>